<template>
	<view class="centent">
		<view class="cent">
			<view class="static">
				<view class="flex" >
						<image src="../../static/img/order/icon_time.png" mode="" style="width: 18px;height: 18px;margin-left: 15px;margin-right: 5px;"></image>
						<text>时间</text>
					</view >
					<view class="flex" @click="showPicker">
						<input type="text" placeholder="请选择起止时间"  disabled="value" style="text-align: right;margin-right: 5px;width: 200px;" v-model="chooseDate"/>
						<image src="../../static/img/order/icon_xiala_hui.png" mode=""  style="width: 10px;height: 6px;margin-right: 30rpx;"></image>
					</view>
			</view>
			<view class="statied">
				<view style="color:#9B9B9B;margin-left: 39px;">快捷选择</view>
				<view :class="timers==1?'times':'timer'" style="margin-left: 45px;" @click="week">本周</view>
				<view :class="timers==2?'times':'timer'" @click="moth">本月</view>
				<view :class="timers==3?'times':'timer'" @click="years">本年</view>
			</view>
		</view>
		<view class="cent">
			<view class="static">
				<view class="flex" >
				<image src="../../static/img/order/icon_dingxiang.png" mode="" style="width: 18px;height: 18px;margin-left: 15px;margin-right: 5px;"></image>
				<text>定向运单数</text>
				</view>
				<view class="flex" style="margin-right: 15px;color: #9B9B9B;">
					{{order}}
				</view>
			</view>
			<view class="statied">
				<view style="margin-left: 39px;">
					运单状态
				</view>
				<view class="orded" @click="states">
					<text style="margin-left: 15px;">{{orders}}</text>
					<image src="../../static/img/icon_xiala_lan.png" mode="" style="width: 10px;height: 6px;margin-right: 10px;"></image>
				</view>
				<view style="color: #FE0700;font-size: 16px;margin-left: 43px;">
					{{ordered}}
				</view>
			</view>
		</view>
		<view class="cent">
			<view class="static">
				<view class="flex" >
				<image src="../../static/img/order/icon_dingxiang.png" mode="" style="width: 18px;height: 18px;margin-left: 15px;margin-right: 5px;"></image>
				<text>计划订单数</text>
				</view>
				<view class="flex" style="margin-right: 15px;color: #9B9B9B;">
					{{planorder}}
				</view>
			</view>
			<view class="statied">
				<view style="margin-left: 39px;">
					订单状态
				</view>
				<view class="orded" @click="planstates">
					<text style="margin-left: 15px;">{{planorders}}</text>
					<image src="../../static/img/icon_xiala_lan.png" mode="" style="width: 10px;height: 6px;margin-right: 10px;"></image>
				</view>
				<view style="color: #FE0700;font-size: 16px;margin-left: 43px;">
					{{planordered}}
				</view>
			</view>
		</view>
		<button @click="but">查询</button>
		<!-- 定向单状态 -->
		<view class="mask" v-if="pricked">
			<view style="width: 100%;border-radius:8px 8px 0px 0px;background-color: #FFFFFF;">
				<view style="height: 56px;display: flex;align-items: center;justify-content: space-between;font-size: 16px;">
					<text style="margin-left: 15px;color: #9B9B9B;" @click="Detemine">取消</text>
					<text>请选择装货地</text>
					<text style="margin-right: 15px;color: #042A58;" @click="Determined">确定</text>
				</view>
			</view>
			<picker-view indicator-style="height: 50px;" @change="bindChanging" >
				<picker-view-column >
					<view v-for="(v,i) in stated" :key="i" class="masked">
						{{v}}
					</view>
				</picker-view-column>
			</picker-view>
		</view>
		<!-- 计划单状态 -->
		<view class="mask" v-if="planpricked">
			<view style="width: 100%;border-radius:8px 8px 0px 0px;background-color: #FFFFFF;">
				<view style="height: 56px;display: flex;align-items: center;justify-content: space-between;font-size: 16px;">
					<text style="margin-left: 15px;color: #9B9B9B;" @click="planDetemine">取消</text>
					<text>请选择装货地</text>
					<text style="margin-right: 15px;color: #042A58;" @click="planDetermined">确定</text>
				</view>
			</view>
			<picker-view indicator-style="height: 50px;" @change="planbindChanging" >
				<picker-view-column >
					<view v-for="(v,i) in planstated" :key="i" class="masked">
						{{v}}
					</view>
				</picker-view-column>
			</picker-view>
		</view>
		<!-- 时间 -->
		<rangeDatePick
			:show="isShow"
			@showchange="showchange"
			@showchang="showchang"
			:start="Data"
			end="2200-12-31"
			@change="bindChang"
			@cancel="bindCancel"
			themeColor="#4C83D6"
			fields="day"
			v-if="add"
		></rangeDatePick>
	</view>
</template>

<script>
	import rangeDatePick from '@/components/range-dtpicker/range-dtpicker.vue';
	import {HZajax} from '../../HZapi.js';
	export default {
		data() {
			const currentDate = this.getDate({
			   format: true
			})
			return {
				createTimeStart:"",
				createTimeEnd:"",
				timers:"0",
				nowDate:currentDate,//获取当前时间
				isShow:false,
				value:[],
				chooseDate:"",
				order:"未选择时间",
				orders:"全部",
				ordered:"0",
				stated:[],
				staterd:"0",
				planorder:"未选择时间",
				planorders:"全部",
				planordered:"0",
				planstated:[],
				planstaterd:"0",
				planpricked:false,
				pricked:false,
				index:0,
				planindex:0,
				Data:"",
				add:false,
			}
		},
		components:{
			rangeDatePick
		},
		onLoad() {
			var currentDate = new Date()
			var y = currentDate.getFullYear(); //年
			var m = currentDate.getMonth() + 1; //月
			if(m<10){
				var mother='0'+m
			}else{
				var mother=m
			}
			var d = currentDate.getDate(); //日
			if(d<10){
				var day='0'+d
			}else{
				var day=d
			}
		this.Data=y+"-"+mother+"-"+day
		if(this.Data==this.Data){
			this.add=true
		}
		},
		onShow() {
			this.isShow=false
		},
		methods: {
			week(){
				this.chooseDate=""
				if(this.timers==1){
					this.timers=0,
					this.createTimeStart=""
					this.createTimeEnd=""
				}else{
					this.timers=1
				  var currentDate = new Date()
				  var timesStamp = currentDate.getTime();
				  var currenDay = currentDate.getDay();
				  var h=currentDate.getHours(); //获取系统时，
				  if(h<10){
				  	var Hours='0'+h
				  }else{
				  	var Hours=h
				  }
				  var M=currentDate.getMinutes(); //分
				  if(M<10){
				  	var Minutes='0'+M
				  }else{
				  	var Minutes=M
				  }
				  var S=currentDate.getSeconds(); //秒
				  if(S<10){
				  	var Seconds="0"+S
				  }else{
				  	var Seconds=S
				  }
				  var dates=[]
				  for (var i = 0; i < 7; i++) {
				      dates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)).toLocaleDateString().replace(/\//g, '-'));
				  }
				  var c=dates[0].split("-")
				 if(c[1]<10){
				 					  var dated="0"+c[1]
				 					  if(c[2]<10){
				 					  		 var datesd="0"+c[2]
				 							 var  timedate=c[0]+"-"+dated+"-"+datesd
				 					  }else{
				 										  var  timedate=c[0]+"-"+dated+"-"+c[2]
				 									  }
				 }else{
				 					  if(c[2]<10){
				 					  		 var datesd="0"+c[2]
				 					  			 var  timedate=c[0]+"-"+c[1]+"-"+datesd
				 					  }else{
				 					  	var  timedate=c[0]+"-"+c[1]+"-"+c[2]
				 					  }
				 }
				  var c=dates[6].split("-")
				  if(c[1]<10){
				  					  var dated="0"+c[1]
				  					  if(c[2]<10){
				  					  		 var datesd="0"+c[2]
				  							 var  timedata=c[0]+"-"+dated+"-"+datesd
				  					  }else{
										  var  timedata=c[0]+"-"+dated+"-"+c[2]
									  }
				  }else{
					  if(c[2]<10){
					  		 var datesd="0"+c[2]
					  			 var  timedata=c[0]+"-"+c[1]+"-"+datesd
					  }else{
					  	var  timedata=c[0]+"-"+c[1]+"-"+c[2]
					  }
				  }
				  this.createTimeStart=timedate+" 00:00:00"
				  this.createTimeEnd=timedata+" 23:59:59"
				  }
			},
			moth(){
				this.chooseDate=""
				if(this.timers==2){
					this.timers=0,
					this.createTimeStart=""
					this.createTimeEnd=""
				}else{
					this.timers=2
				var currentDate = new Date()
				var y = currentDate.getFullYear(); //年
				var m = currentDate.getMonth() + 1; //月
				if(m<10){
					var mother='0'+m
				}else{
					var mother=m
				}
				var d = currentDate.getDate(); //日
				if(d<10){
					var day='0'+d
				}else{
					var day=d
				}
				var h=currentDate.getHours(); //获取系统时，
				if(h<10){
					var Hours='0'+h
				}else{
					var Hours=h
				}
				var M=currentDate.getMinutes(); //分
				if(M<10){
					var Minutes='0'+M
				}else{
					var Minutes=M
				}
				var S=currentDate.getSeconds(); //秒
				if(S<10){
					var Seconds="0"+S
				}else{
					var Seconds=S
				}
				this.createTimeStart=y+'-'+mother+'-'+'01'+" 00:00:00"
				this.createTimeEnd=y+'-'+mother+'-'+day+' '+Hours+':'+Minutes+':'+Seconds
				}
			},
			years(){
				this.chooseDate=""
				if(this.timers==3){
					this.timers=0,
					this.createTimeStart=""
					this.createTimeEnd=""
				}else{
					this.timers=3
				var currentDate = new Date()
				var y = currentDate.getFullYear(); //年
				var m = currentDate.getMonth() + 1; //月
				if(m<10){
					var mother='0'+m
				}else{
					var mother=m
				}
				var d = currentDate.getDate(); //日
				if(d<10){
					var day='0'+d
				}else{
					var day=d
				}
				var h=currentDate.getHours(); //获取系统时，
				if(h<10){
					var Hours='0'+h
				}else{
					var Hours=h
				}
				var M=currentDate.getMinutes(); //分
				if(M<10){
					var Minutes='0'+M
				}else{
					var Minutes=M
				}
				var S=currentDate.getSeconds(); //秒
				if(S<10){
					var Seconds="0"+S
				}else{
					var Seconds=S
				}
				this.createTimeStart=y+'-'+'01'+'-'+'01'+" 00:00:00"
				this.createTimeEnd=y+'-'+mother+'-'+day+' '+Hours+':'+Minutes+':'+Seconds
				}
			},
			// 选择时间段
			showPicker(e){
				this.isShow=true
			},
			showchange(){
				this.chooseDate="请选择起止时间"
				this.isShow=!this.isShow;
			},
			showchang(){
				this.isShow=!this.isShow;
			},
			bindChang(data){
				this.timers=0
				this.chooseDate=data[0]+"至"+data[1]
				this.createTimeStart=data[0]
				this.createTimeEnd=data[1]
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 定向单状态
			states(){
					// this.stated=['全部','未接单','已拆单','完成']
					// this.staterd=[0,1,2,3]
					// this.pricked=true
					// this.index=0
					this.stated=['全部','未接单','已接单','已发车','已完成','已回单','拒单','后台取消运单','已结算']
					this.staterd=[0,1,2,3,4,5,6,7,8]
					this.pricked=true
					this.index=0
			},
			bindChanging(event){
				this.index=event.detail.value[0]
			}, 
			Detemine(){
				this.pricked=false
				this.staterd="0"
			},
			Determined(){
				this.orders=this.stated[this.index]
				this.staterd=this.staterd[this.index]
				this.pricked=false
				},
			// 计划单状态
			planstates(){
					this.planstated=['全部','未接单','已拆单','完成']
					this.planstaterd=[0,1,2,3]
					this.planpricked=true
					this.planindex=0
			},
			planbindChanging(event){
				this.planindex=event.detail.value[0]
			}, 
			planDetemine(){
				this.planpricked=false
				this.planstaterd="0"
			},
			planDetermined(){
				this.planorders=this.planstated[this.planindex]
				this.planstaterd=this.planstaterd[this.planindex]
				this.planpricked=false
				},
			// 查询
			but(){
				var that=this
			HZajax({
				url:"/v1/order/user/order/count",
				method:"post",
				data:{
					createTimeStart:that.createTimeStart,
					createTimeEnd:that.createTimeEnd,
					isDetach:that.planstaterd,
					driverstatus:that.staterd
				},
				success(res){
					console.log(res.data.message)
					that.planordered=res.data.message.orderCount,
					that.ordered=res.data.message.wayBillCount
				}
			}),
				HZajax({
					url:"/v1/order/user/order/count",
					method:"post",
					data:{
					},
					success(res){
						console.log(res.data.message)
						that.planorder=res.data.message.orderCount,
						that.order=res.data.message.wayBillCount
					}
				})	
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.centent{
		height: 100%;
		background-color: #f5f5f5;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
.cent{
	width:355px;
	height:109px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	margin-top: 10px;
}
.static{
	width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #F5F5F5;
}
.statied{
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	font-size: 14px;
}
.timer{
	width:60px;
	height:30px;
	background:rgba(242,243,246,1);
	border-radius:4px;
	color: #939FB9;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
}
.times{
	width:60px;
	height:30px;
	background:#042A58;
	border-radius:4px;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
}
.orded{
	width:140px;
	height:36px;
	background:rgba(242,243,246,1);
	border-radius:8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 39px;
}
.mask{
		width: 100%;
		height:100%;
		position:fixed;
		flex-direction: column;
		background: rgba(0,0,0,0.4);
			display: flex;
				z-index: 2;
				justify-content: flex-end;
		top: 0;
		left: 0;
	}
	.masked{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	picker-view{
		width:375px;
		height:276px;
		background:rgba(255,255,255,1);
		border-top:1px solid #F5F5F5 ;
	}
	button{
		width:355px;
		height:44px;
		background:rgba(4,42,88,1);
		border-radius:8px;
		color: #FFFFFF;
		font-size: 16px;
		margin-top: 62px;
	}
</style>
